<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        div           元素
        class="box"   属性(写在标签内 和标签名以一个空格分隔的叫做属性(属性名="属性值") 可以没有,也可以有多个,多个之前用空格分隔)

     -->
    <div id="box" class="one two three" ></div>
</body>
<script>

    // 所有的节点都是对象类型
    
    // 属性节点 依存于 元素节点  => 获取属性节点之前 先获取元素节点

    // 1. 获取元素节点
    var box = document.querySelector("#box"); 
    // console.log(box,typeof box);

    // 2. 元素节点 对应属性名获取属性节点
    // var attrId =  box.getAttributeNode("id"); 
    // console.log(attrId,typeof attrId);

    // // 3. 通过属性节点 获取属性节点的属性名和属性值,属性值也可以修改
    // console.log(attrId.nodeName);  // 属性节点的属性名
    // console.log(attrId.nodeValue); // 属性节点的属性值

    // attrId.nodeValue = "ID"; // 设置属性节点的属性值
    // console.log(box);

    // 小结: 2 3 拆成两步太麻烦  -> 官方提供了更简单的方法

    // Element.getAttribute(attrName)   对应属性名获取属性值  => 存在该属性:返回属性值 不存在:null
    // Element.setAttribute(attrName,attrValue)   对应属性名设置属性值 (没有就新增 有就修改)
    // Element.removeAttribute(attrName)   对应属性名删除属性

    // 获取
    // var id = box.getAttribute("id");
    // console.log(id);

    // var cls = box.getAttribute("class");
    // console.log(cls);

    // var title = box.getAttribute("title");
    // console.log(title);


    // 设置 (没有就新增 有就修改)
    // box.setAttribute("title","hello");
    // box.setAttribute("id","BOX");
    // box.setAttribute("class","first second third");
   
    
    
    // 删除
    // box.removeAttribute("id");
    // box.removeAttribute("class");
    // console.log(box);





    // var arr = [1,2,3];
    // console.log(arr); // [1,2,3]

    // arr.push(4);
    // console.log(arr);  // [1,2,3,4]

</script>
</html>